<template>
  <div class="introduction">
    <div class="introduction-nav">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{route, params, routes, paths}">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{route.breadcrumbName}}</router-link>
        </template>
      </a-breadcrumb>
      <br>
    </div>
    <div class="introduction-avatar-dsc">
      <a-avatar class="introduction-avatar" :size="80" src="/images/touxiang.png"/>
      <span>晚上好，dafeizhu，熬夜加班伤身体，注意休息哦！</span>
      <p>前端工程师 | 中山大学新华学院 - 代码敲得都队 - AntDesign-Vue</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Introduction',
  data () {
    const { lang } = this.$route.params
    return {
      basePath: `/${lang}/components/breadcrumb`,
      routes: [{
        path: 'index',
        breadcrumbName: '首页'
      }, {
        path: 'first',
        breadcrumbName: '签到信息查询'
      }, {
        path: 'second',
        breadcrumbName: '工作台'
      }],
    }
  },
}
</script>
<style scoped>
.introduction {
  margin-top: 4px;
  width: 100%;
  min-height: 142px;
  background-color: #fff;
  padding: 16px 32px 0;
}
.introduction-avatar-dsc {
  position: relative;
  min-height: 80px;
  max-width: 800px;
}
.introduction-avatar {
  float: left;
  margin-right: 40px;
}
.introduction-avatar-dsc span {
  display: inline-block;
}
.introduction-avatar-dsc span {
  font-size: 24px;
}
.introduction-avatar-dsc p {
  display: inline-block;
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>
